@if (active) {
  <button class="position-absolute top-0 start-100 translate-middle badge bg-secondary border border-light rounded-pill p-1" title="Clear" i18n-title (click)="onClick($event)">
    @if (!isNumbered && selected) {
      <svg width="1em" height="1em" class="check m-0 p-0 opacity-75" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="assets/bootstrap-icons.svg#check-lg"/>
      </svg>
    }
    @if (isNumbered) {
      <div class="number">{{number}}<span class="visually-hidden">selected</span></div>
    }
    <svg width=".9em" height="1em" class="x m-0 p-0 opacity-75" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <use xlink:href="assets/bootstrap-icons.svg#x-lg"/>
    </svg>
  </button>
}
